<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        字段权限
      </div>
      <div class="ef-node-form-body" v-if="node.id">
        <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
         <el-form-item label="节点名称">
           <el-input v-model="node.name" size="small" style="width:100% !important;" @change="save"></el-input>
        </el-form-item>
<!--          <div class="ef-node-form-header">-->
<!--            字段权限-->
<!--          </div>-->
          <div class="topheader" v-if="node.fildList&&node.fildList.length>0">
            <div class="headerleft"></div>
            <div class="headercenter">
              可见
            </div>
            <div class="headerright">
              可编辑
            </div>
          </div>
          <div class="topall" v-if="(node.fildList&&node.fildList.length>0)">
            <div class="headerleft">
              <span style="color: #43c9a8">全选</span>
            </div>
            <div class="headercenter" @click="checkallshow">
              <i class="el-icon-check circkelr" v-if="node.allshow"></i>
              <i class="circle" v-else></i>
            </div>
            <div class="headerright"  @click="checkalledit">
              <i class="el-icon-check circkelr" v-if="node.alledit"></i>
              <i class="circle" v-else></i>
            </div>
          </div>

          <div class="topall" :key="index" v-for="(item,index) in node.fildList">
            <div class="headerleft">
              <span>{{item.fieldName}}</span>
            </div>
            <div class="headercenter" @click="cehckshow(index)">
              <i class="el-icon-check circkelr" v-if="item.isShow"></i>
              <i class="circle" v-else></i>
            </div>
            <div class="headerright" @click="cehckedit(index)">
              <i class="el-icon-check circkelr" v-if="item.canEdit"></i>
              <i class="circle" v-else></i>
            </div>
          </div>
<!--          <el-alert-->
<!--              title="选择后记得保存"-->
<!--              type="success" :closable="false">-->
<!--          </el-alert>-->
          <!--                    <el-form-item label="left坐标">-->
          <!--                        <el-input v-model="node.left" :disabled="true"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="top坐标">-->
          <!--                        <el-input v-model="node.top" :disabled="true"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="ico图标">-->
          <!--                        <el-input v-model="node.ico"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="状态">-->
          <!--                        <el-select v-model="node.state" placeholder="请选择">-->
          <!--                            <el-option-->
          <!--                                    v-for="item in stateList"-->
          <!--                                    :key="item.state"-->
          <!--                                    :label="item.label"-->
          <!--                                    :value="item.state">-->
          <!--                            </el-option>-->
          <!--                        </el-select>-->
          <!--                    </el-form-item>-->
<!--          <el-form-item>-->
<!--            <div style="height: 30px;width: 100%"></div>-->
<!--            <el-button type="primary" icon="el-icon-check" @click="save" size="small">保存</el-button>-->
<!--          </el-form-item>-->
        </el-form>
        <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
          <el-form-item label="条件">
            <el-input v-model="line.label"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
  </div>

</template>

<script>
import {cloneDeep} from 'lodash'
import {api} from "@/server/api";

export default {
  data() {
    return {
      visible: true,
      // node 或 line
      type: 'node',
      fildList: [],
      node: {fildList:[],allshow:true,alledit:false},
      line: {},
      data: {},
      stateList: [{
        state: 'success',
        label: '成功'
      }, {
        state: 'warning',
        label: '警告'
      }, {
        state: 'error',
        label: '错误'
      }, {
        state: 'running',
        label: '运行中'
      }]
    }
  },
  mounted() {

  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = 'node'
      this.data = data
      console.log(data);
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node)
          console.log(this.node)
          if(this.$route.query.flowVersion!=undefined){
            if (this.node.fildList.length < 1) {
              console.log()
              this.fidlist()
            }else{
              const finedit=this.node.fildList.filter(val=>{
                return val.canEdit===false
              })
              finedit.length>0?this.node.alledit=false:this.node.alledit=true
              const fineshow=this.node.fildList.filter(val=>{
                return val.isShow===false
              })
              fineshow.length>0?this.node.allshow=false:this.node.allshow=true
              console.log(fineshow)
              console.log(finedit)
            }
          }


        }
      })
    },
    cehckshow(index){
      if(this.node.nodeType===2){
        this.$message.error('审核节点的查看状态不可修改');
        return
      }
      this.node.fildList[index].isShow=!this.node.fildList[index].isShow
      const findvalu=this.node.fildList.filter(val=>{
        return val.isShow
      })
      if(findvalu.length===this.node.fildList.length){
        this.node.allshow=true
      }else{
        this.node.allshow=false
      }
      this.save()
    },
    checkallshow(){
      if(this.node.nodeType===2){
        this.$message.error('审核节点的查看状态不可修改');
        return
      }
       this.node.allshow=!this.node.allshow
      if(this.node.allshow){
        this.node.fildList.map(val=>{
           val.isShow=true
        })
      }else{
        this.node.fildList.map(val=>{
          val.isShow=false
        })
      }
      this.save()
    },
    checkalledit(){
      this.node.alledit=!this.node.alledit
      if(this.node.alledit){
        this.node.fildList.map(val=>{
          val.canEdit=true
        })
      }else{
        this.node.fildList.map(val=>{
          val.canEdit=false
        })
      }
      this.save()
    },
    cehckedit(index){
      this.node.fildList[index].canEdit=!this.node.fildList[index].canEdit
      const findvalu=this.node.fildList.filter(val=>{
        return val.canEdit
      })
      if(findvalu.length===this.node.fildList.length){
        this.node.alledit=true
      }else{
        this.node.alledit=false
      }
      this.save()
    },
    fidlist() {
      if (this.node.fildList.length < 1) {
        if (this.fildList.length < 1) {
          this.getlist()
        } else {
          this.node.fildList = this.fieldLst
        }
      }
    },
    lineInit(line) {
      this.type = 'line'
      this.line = line
    },
    // 修改连线
    saveLine() {
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },
    getlist() {
      api
          .stdflowFlowDetail({
            tableId: this.$route.query.tableId,
            flowVersion: 1
          })
          .then(res => {
            console.log(res);
            console.log(this.node)
            const {fieldLst} = res;
            let list=[]
            fieldLst.map(val=>{
              if(val.fieldType!='IdentityKey'){
                let obj={
                   fieldName:val.fieldName,
                   fieldId:val.fieldId,
                   isShow:true,
                   canEdit:false,
                 }
                list.push(obj)
              }
            })
            this.fieldLst = list;
            this.node.fildList = this.fieldLst;

          });
    },
    save() {
      this.data.nodeList.filter((node) => {
        if (node.id === this.node.id) {
          node.name = this.node.name
          node.left = this.node.left
          node.top = this.node.top
          node.ico = this.node.ico
          node.state = this.node.state
          node.fildList = this.node.fildList
          this.$emit('repaintEverything')
        }
      })
    }
  }
}
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}

.topheader {
  width: 98%;
  margin-left: 2%;
  height: 30px;
  display: flex;
  background-color: #FAFAFA;
  border-bottom: solid 1px #ddd;
  font-size: 14px;
  color: #606266;
}

.topall {
  width: 98%;
  margin-left: 2%;
  display: flex;
  height: 35px;
  font-size: 14px;
  border-bottom: solid 1px #ddd;
  color: #606266;
}

.headerleft {
  width: 50%;
  display: flex;
  height: 100%;
  align-items: center;
}

.headercenter {
  width: 25%;
  display: flex;
  height: 100%;
  align-items: center;
}

.headerright {
  width: 25%;
  display: flex;
  height: 100%;
  align-items: center;

}

.circle {
  isplay: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #91A1B7;
  position: relative;
  background: #fff;
  -webkit-transition: all 218ms ease-in-out;
  -moz-transition: all 218ms ease-in-out;
  -o-transition: all 218ms ease-in-out;
  transition: all 218ms ease-in-out;
  top: 2px;
  border-radius: 2px;
}

.circkelr {
  isplay: inline-block;
  position: relative;
  border-color: #0DB3A6;
  background: #0DB3A6;
  -webkit-transition: all 218ms ease-in-out;
  -moz-transition: all 218ms ease-in-out;
  -o-transition: all 218ms ease-in-out;
  transition: all 218ms ease-in-out;
  top: 2px;
  color: white;
  font-size: 15px;
  border-radius: 2px;
}


</style>
